$preview-item-first-height: 160px;
$preview-item-height: 120px;

.article-form {
    padding:20px;
    background: #f4f5f9;
    border:1px solid #e7e7eb;
}

.articles-preview-container {
    padding-top: 1px;

    .article-preview-item {
        border: 1px solid #dedede;
        position: relative;
        height: $preview-item-height;
        padding: 20px 15px;
        display: flex;

        &.first {
            height: $preview-item-first-height;
        }

        margin-top: -1px;

        .article-preview-item-cover-placeholder {
            display: block;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            border:0;
            line-height: $preview-item-first-height;
            background: #eee;
            color: #666;
            text-align: center;
        }

        .article-preview-item-title {
            position: absolute;
            bottom: 0;
            left: -1px;
            right: -1px;
            height: 28px;
            line-height: 28px;
            padding: 0 10px;
            background-color: rgba(0,0,0,0.6);
            color: #fff;
        }

        .article-preview-item-thumb-title {
            display: inline-flex;
            width: 182px;
            padding-right: 15px;
        }

        .article-preview-item-thumb-placeholder {
            display: inline-flex;
            width: 78px;
            background-color: #eee;

            .inner {
                line-height: 78px;
                text-align: center;
                display: block;
                width: 100%;
            }
        }

        .article-preview-item-edit-links {
            position:absolute;
            display:none;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom:0;
            background: rgba(255, 255, 255, 0.6);
            color: #000;
            line-height: $preview-item-height;
            border:1px solid #999;
            font-size: 24px;
            text-align: center;
            transition: all 3s;

            i {
                padding: 15px;
            }
        }

        &:hover .article-preview-item-edit-links {
            display:block;
        }

        .add-new-item {
            display: block;
            width: 100%;
            text-align: center;
            line-height: 78px;
            border: 1px dashed #ccc;
            font-size: 24px;
        }
    }
}